<script setup>
import { ref, getCurrentInstance, onMounted } from 'vue'
import Loading from '../../components/loading.vue'
import { useRouter } from 'vue-router'
import toast from 'vant/es/toast/index'

const { proxy } = getCurrentInstance()

const infoBg = new URL('../../assets/img/info_bg.png', import.meta.url).href
const cloud = new URL('../../assets/img/cloud.png', import.meta.url).href
const logo = new URL('../../assets/img/logo.png', import.meta.url).href
const loading = ref(true)

/**
 * 跳转
 * @param {*} e
 */
const goto = (e) => {
  if (!e) return
  window.open(e)
}

/** 生产信息 */
const getTraceBackData = async () => {
  try {
    let res = await proxy.$api.call('qin.getTraceBackData', {
      traceBack: traceabilityCode.value
    })
    if (!res.res) return
    if (res.hasOwnProperty('prdProcess') && res.prdProcess && res.prdProcess.length) {
      content.value = [
        {
          group: '产品生产过程',
          color: '#37B24D',
          data: res.prdProcess.map((v) => {
            return {
              title: v.title,
              content: v.content,
              image: v.url,
              url: ''
            }
          })
        }
      ]
    } else {
      content.value = res.prdInformation ? res.prdInformation.map((v) => Object.assign(v, { fold: false })) : []
    }
  } finally {
    loading.value = false
  }
}

const traceabilityCode = ref('')
onMounted(() => {
  traceabilityCode.value = useRouter().currentRoute.value.query.traceabilityCode
  if (!traceabilityCode.value) {
    toast.fail('信息不存在')
    loading.value = false
    return
  }
  getTraceBackData()
})

const content = ref([
  // {
  //   title: '产品生产过程',
  //   icon: 'icon-a-workshopproduction',
  //   color: 'green',
  //   fold: false,
  //   content: []
  // },
  // {
  //   title: '生产关键控制点',
  //   icon: 'icon-zhanneisousuoguanjianci',
  //   color: 'red',
  //   content: []
  // }
])

document.title = '生产信息'
</script>
<template>
  <Loading v-if="loading"></Loading>
  <div class="top" :style="{ backgroundImage: `url(${infoBg})` }">
    <div class="top-cloud">
      <img :src="cloud" alt="" />
    </div>
    <div class="top-logo">
      <img :src="logo" alt="" />
    </div>
  </div>
  <div class="content">
    <div class="content-title">生产信息</div>
    <div
      class="content-item"
      v-for="(item, index) in content"
      :key="index"
      :class="item.fold ? 'content-item-fold' : ''"
    >
      <div class="title-flex margin-b" :style="{ color: item.color }" @click="item.fold = !item.fold">
        <div class="content-item-title">
          <!-- <i class="iconfont" :class="item.icon"></i> -->
          <div>{{ item.group }}</div>
        </div>
        <i class="iconfont icon-xiajiantou- icon-fold" :class="{ 'icon-fold-reverse': item.fold }"></i>
      </div>
      <template v-for="(node, nodeIndex) in item.data" :key="nodeIndex">
        <template v-for="(element, key, eIndex) in node" :key="eIndex">
          <div class="content-item-subtitle" v-if="key === 'title' && node.title">{{ node.title }}</div>
          <div class="content-item-text" v-else-if="key === 'content' && node.content">
            {{ node.content }}
          </div>
          <div class="content-item-img" v-else-if="key === 'image' && node.image" @click="goto(node.url)">
            <img :src="node.image" alt="" />
          </div>
        </template>
      </template>
    </div>
  </div>
</template>
<style lang="less" scoped>
@import url(../../assets/css/common.less);
</style>
